<template>
	<div>
		<van-field v-model="fieldValue" input-align="right" is-link readonly :label="items.name" :required="items.isMustFill === '是'"
		 placeholder="请选择" @click="show = true" />
		<van-popup v-model="show" round position="bottom">
			<van-cascader v-model="cascaderValue" title="请选择" :options="firstList" @close="show = false" @change="onChange"
			 @finish="onFinish" />
		</van-popup>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				fieldValue: '',
				cascaderValue: '',
				firstList: [],
			};
		},
		props: ['items'],
		created() {
			if (this.items.moreSelectList.length !== 0) {
				const list = this.items.moreSelectList
				const listLen = this.items.moreSelectList.length
				let one,two,three
				list[0].datas.forEach((item, index) => {
					this.firstList.push({
						text: item.name,
						value: item.id,
						children: []
					})
					if (listLen >= 2) {
						if (list[0].selectValue === item.id) {
							one = item.name
							list[1].datas.forEach((item1, index1) => {
								this.firstList[index].children.push({
									text: item1.name,
									value: item1.id,
									children: []
								})
								if (listLen === 3) {
									if (list[1].selectValue === item1.id) {
										two = item1.name
										list[2].datas.forEach((item2, index2) => {
											this.firstList[index].children[index1].children.push({
												text: item2.name,
												value: item2.id
											})
											if(list[2].selectValue === item2.id){
												three = item2.name
											}
										})
									}
								}
							})
						}
					}
				})
				if(listLen > 1){
				  this.fieldValue = `${one}/${two}/${three}`
				}
				if(listLen === 2) {
					this.cascaderValue = list[1].selectValue
				} else if (listLen === 3) {
					this.cascaderValue = list[2].selectValue
				}								
			}			
		},
		methods: {
			onChange({ value }) {
				this.$axios.post(
					`/api/moreSelectRef?_form=${this.$route.query.form_id}&_selectedValue=${value}&_fieldDataGroup=${this.items.fieldDataGroup}&_fieldId=${this.items.id}`
				).then(res => {
					if (res.data.code === 0) {
						this.firstList.forEach((item, index) => {
							if (item.value === value) {
								this.firstList[index].children = res.data.data.map(item => ({
									text: item.name,
									value: item.id,
									children: []
								}))							
							} else {
								const list = this.firstList[index].children
								list.forEach((item1, index1) => {
									if (item1.value === value) {
										list[index1].children = res.data.data.map(item2 => ({
											text: item2.name,
											value: item2.id,
										}))
									}
								})
							}
						})
					}
				})
			},
			onFinish({
				selectedOptions
			}) {
				this.show = false;
				this.fieldValue = selectedOptions.map((option) => option.text).join('/');
			},
		},
	};
</script>

<style lang="scss" scoped>

</style>
